<template>
    <div class="item-container" @click="itemClick">
        <el-row align="middle" :gutter="10">
            <el-col :offset="1" :span="2">
                <img style="width: 50px;height: 50px;" :src="countdownDayImg">
            </el-col>
            <el-col :span="9">
                <div style="display: flex;align-items: center;gap: .5em;">
                    <span class="name">{{ person.name }}</span>
                    <el-tag :type="dateTypeTag">{{ getDateType(person.dateType) }}</el-tag>
                </div>
                <div class="birthday">{{ person.birthday }}</div>
            </el-col>
            <el-col :span="8">
                <div style="color: dodgerblue;" v-if="daysUntilBirthday > 0">
                    <span class="name">{{ daysUntilBirthday }}</span>天后到目标日
                </div>
                <div v-else style="color: red;">今天是倒数日！！！</div>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" :icon="Edit" circle size="large" @click.stop="() => editData(person)" />
                <el-button type="danger" :icon="Delete" circle size="large" @click.stop="() => deleteData(person)" />
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import birthdayUtil from '../utils/birthdayUtil'
import countdownDayImg from '@/assets/images/countdown-day.png'

const props = defineProps({
    person: {
        type: Object,
        required: true,
    },
});

const emit = defineEmits(["loadData", "editData", "deleteData", "itemClick"])

const dateTypeTag = computed(() => {
    return props.person.dateType === "1" ? "primary" : "warning";
});

const daysUntilBirthday = computed(() => {
    return birthdayUtil.daysUntilBirthday(props.person.birthday, props.person.dateType);
});

function getDateType(dateType) {
    return dateType == 1 ? "公历" : "农历";
}

// 删除数据
function deleteData() {
    emit('deleteData');
}

// 编辑数据
function editData() {
    emit('editData');
}

function itemClick() {
    emit('itemClick');
}
</script>

<style scoped>
.person-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.person-name {
    flex: 4;
    display: flex;
    flex-direction: column
}

.name {
    font-size: 24px;
    font-weight: bold;
    margin-right: 10px;
    color: dodgerblue;
}

.birthday {
    color: dodgerblue;
}

.person-info {
    flex: 2;
    display: flex;
    align-items: center;
}

.actions {
    flex: 1;
    display: flex;
    align-items: center;
}
</style>